<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>订单详情</title>
    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
    <link rel="Bookmark" href="favicon.ico">

    <link href="../css/reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<#include "../common/header.ftl" />
<@person></@person>
<@personheader></@personheader>


<div class="container cf accortop">

    <!--导航-->
<#include "../common/personnavigation.ftl" />
<@personnavigation></@personnavigation>

    <!---->
    <div class="orderlist">
        <h1>订单详情</h1>
        <div class="component">
            <table>
                <thead>
                <tr>
                    <th>商品编码</th>
                    <th>商品名称</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>总价</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>100</td>
                    <td>
                        <div class="cart-pic">
                            <img src="../img/1.jpg" alt="">
                        </div>
                        <div class="cart-title">当用户决定购买某件物品的浮动购物车交互效果</div>
                    </td>
                    <td>1000.95</td>
                    <td>23</td>
                    <td>1000.95</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>
                        <div class="cart-pic">
                            <img src="../img/1.jpg" alt="">
                        </div>
                        <div class="cart-title">当用户决定购买某件物品的浮动购物车交互效果</div>
                    </td>
                    <td>1000.95</td>
                    <td>23</td>
                    <td>1000.95</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>
                        <div class="cart-pic">
                            <img src="../img/1.jpg" alt="">
                        </div>
                        <div class="cart-title">当用户决定购买某件物品的浮动购物车交互效果</div>
                    </td>
                    <td>1000.95</td>
                    <td>23</td>
                    <td>1000.95</td>
                </tr>
                </tbody>
            </table>
            <div class="cart-foot">
                <div class="cart-fr">
                    <div class="item-total">数量总计<small>3</small>件</div>
                    <div class="item-total">商品金额：<small>258.00</small>元</div>
                </div>
            </div>
            <h1>物流信息</h1>

            <table>
                <thead>
                <tr>
                    <th>收货人姓名</th>
                    <th>收货人电话</th>
                    <th>邮政编码</th>
                    <th>收货地址</th>
                    <th>邮箱</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>张三</td>
                    <td>15920165578</td>
                    <td>510000</td>
                    <td>广州市天河区上社口岗新大街</td>
                    <td>457522882@qq.com</td>
                </tr>
                </tbody>
            </table>

            <h1>支付方式</h1>
            <div class="yhzz">
                <h2>银行转账</h2>
                <p>
                    <label>银   行：</label>
                    <span>中国银行</span>
                </p>
                <p>
                    <label>收款人：</label>
                    <span>张三</span>
                </p>
                <p>
                    <label>收款号：</label>
                    <span>440555855587555887545</span>
                </p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    $(function() {
        // nav收缩展开
        $('.navMenu li a').on('click', function() {
            var parent = $(this).parent().parent(); //获取当前页签的父级的父级
            var labeul = $(this).parent("li").find(">ul")
            if($(this).parent().hasClass('open') == false) {
                //展开未展开
                parent.find('ul').slideUp(300);
                parent.find("li").removeClass("open")
                parent.find('li a').removeClass("active").find(".icon-under").removeClass("open")
                $(this).parent("li").addClass("open").find(labeul).slideDown(300);
                $(this).addClass("active").find(".icon-under").addClass("open")
            } else {
                $(this).parent("li").removeClass("open").find(labeul).slideUp(300);
                if($(this).parent().find("ul").length > 0) {
                    $(this).removeClass("active").find(".icon-under").removeClass("open")
                } else {
                    $(this).addClass("active")
                }
            }

        });
    });
</script>
</body>
</html>
